<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input v-model="query.keywords" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchTest">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updatPage">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="batchRemove">批量删除</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="department.rows" highlight-current-row v-loading="listLoading"
              @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="180">
      </el-table-column>
      <el-table-column prop="name" label="菜单名称" width="120" sortable>
      </el-table-column>

      <el-table-column prop="parent.name" label="父级菜单" width="180" sortable>
      </el-table-column>
      <el-table-column prop="url" label="菜单url" width="180" sortable>
      </el-table-column>
      <el-table-column prop="icon" label="菜单图标" width="180" sortable>
      </el-table-column>

      <el-table-column label="操作" width="400">
        <template scope="scope">
          <el-button  size="small" @click="editPage(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pageSize"
        :current-page="query.currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="department.total">
    </el-pagination>

    <!--新增-->

    <el-dialog title="新增/修改"  :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">

        <el-form-item label="菜单名字" label-width="60" prop="name">
          <el-input v-model="addForm.name" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="菜单地址" label-width="60">
          <el-input v-model="addForm.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父级菜单" label-width="60">
          <template>
            <el-select v-model="addForm.parent" clearable value-key="id" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="菜单图标" label-width="60">
          <el-input v-model="addForm.icon" autocomplete="off"></el-input>
        </el-form-item>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reDate">取 消</el-button>
        <el-button type="primary" @click="addAndUpdate">确 定</el-button>
      </div>
    </el-dialog>


  </section>

</template>

<script>




export default {
  data() {
    return {

      department:{
        rows: [],
        total: 0,
      },

      listLoading: false,
      sels: [],//列表选中列

      dialogFormVisible:false,

      //校验表单规则
      addFormRules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ]
      },
      //新增界面数据
      addForm: {
        id:null,
        name: '',
        url:'',
        parent:{
          id:null,
          name:''
        },
        icon:'',

      },

      query:{
        currentPage:1,
        pageSize:10,
        keywords:""
      },
      //部门下拉框数据
      options:[
        {
          id:1,
          name:"请选择"
        }
      ],
      key:'',
      employees:[],
      deptTree:[],

    }
  },
  methods: {
    //取消，刷新页面
    reDate(){
      this.dialogFormVisible=false
      this.roleMenu();
      this.addForm={
        id:null,
        name: '',
        manager:{
          id:null,
          username:''
        },
        parent:{
          id:null,
          name:''
        },
        intro: ''
      }
    },

    //调用显示全部菜单
    getAllMenus(){
      this.$http.get("/menu")
      .then(result=>{
        result=result.data

        this.options=result.object


      })

      .catch(result=>{

      })
    },
    //显示新增界面
    updatPage(){
      this.addForm={
        id:null,
        name: '',
        url:'',
        parent:{
          id:null,
          name:''
        },
        icon:''
      },
          this.dialogFormVisible=true;
      this.getAllMenus();

    },
    //编辑回显
    editPage(index,row){
      this.dialogFormVisible=true;

      this.addForm=row
      this.getAllMenus()
    },

    //获取部门数据
    getDeptData(){
      this.$http.get("/department/tree")
          .then(result=>{
            result=result.data;
            if(result.success){
              this.deptTree=result.object
            }
          })
          .catch(result={
          })
    },
    //新增或者修改数据
    addAndUpdate: function () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            let para = Object.assign({}, this.addForm);
            if(!para.parent){
              para.parent={
                id:null
              }
            }


            this.$http.post("/menu",para)
                .then(result=>{
                  result=result.data;
                  if(result.success){
                    this.$message({type: 'success',message:result.message});
                  }else {
                    this.$message({type: 'error',message:result.message});
                  }
                  this.dialogFormVisible=false;
                  this.query.currentPage=1;
                  this.roleMenu();
                })
                .catch(result=>{
                  this.$message({type: 'error',message:"网络出错了"});
                })
          });
        }
      });
    },

    //查询搜索
    searchTest(){
      this.query.currentPage=1;
      this.roleMenu()

    },
    //监听当前页面所需展示条数
    handleSizeChange(val){
      this.query.currentPage = 1;
      this.query.pageSize=val;
      this.roleMenu();
    },
    //监听当前页面索引
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.roleMenu();
    },


    //获取所有菜单
    roleMenu() {
      this.$http.put("/menu",this.query)
          .then(res=>{

            res=res.data;

            this.department=res.object
          })
          .catch(err=>{
            this.$message({
              message: '分页查询失败'+err.message,
              type: 'error'
            });
          })
    },
    //删除单个菜单操作
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/menu/"+row.id)
            .then(result =>{
              result=result.data
              this.listLoading = false;
              if(result.success){
                this.$message({message: '删除成功', type: 'success'});
                //刷新页面
                this.query.currentPage=1;
                this.roleMenu();
              }else {
                this.$message({message: '删除失败'+result.message, type: 'error'});
              }
            })
            .catch(errpr=>{
              this.$message({message: '网络出错', type: 'error'});
            })
      }).catch(() => {
        this.$message({message: '取消删除', type: 'info'});
      });
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.dialogFormVisible = true;
      this.addForm=row
    },

    selsChange: function (sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function () {
      var ids = this.sels.map(item => item.id);
      if(this.sels.length ==0){
        this.$message({
          message: '未选择数据，请选择需要删除的数据后再操作',
          type: 'info'
        });
        return;
      }
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {

        this.$http.patch("/menu",ids)
            .then(result =>{
              result=result.data;
              if(result.success){
                this.$message({
                  message: '批量删除成功',
                  type: 'success'
                });
                this.query.currentPage=1
                this.roleMenu()
              }else {
                this.$message({
                  message: '批量删除失败'+result.message,
                  type: 'error'
                });
              }
            })
            .catch(result=>{
              this.$message({
                message: '网络出错了',
                type: 'error'
              });
            })
      }).catch(() => {
        this.$message({
          message: '取消删除',
          type: 'info'
        });
      });
    }
  },
  mounted() {
    this.roleMenu();
  }
}

</script>

<style scoped>

</style>